<template>
	<div class="mt-30px">
		<template v-if="props.methods === 'pay'">
			<p class="text-14px text-#86909C">交易数量</p>
			<div
				class="mt-10px rounded-8px border-1px border-solid border-#E5E6EB flex items-center justify-between h-58px box-border p-20px">
				<el-input placeholder="请输入交易数量"></el-input>
				<p>USDT</p>
			</div>
			<div class="flex items-center mt-20px">
				<p class="text-14px text-#86909C mr-10px"> 单笔订单限额</p>
				<img src="/transaction/c2c/c2cMore/fill-gantanhao.svg" alt="">
			</div>
			<div class="flex items-center justify-between mt-10px">
				<div class="rounded-8px border-1px border-solid border-#E5E6EB flex items-center justify-between h-58px box-border p-20px
					w-45%">
					<el-input placeholder="最小限额：20"></el-input>
					<p class="text-#86909C">CNY</p>
				</div>
				<img src="/transaction/c2c/c2cMore/hengxian.svg" alt="">
				<div class="rounded-8px border-1px border-solid border-#E5E6EB flex items-center justify-between h-58px box-border p-20px
					w-45%">
					<el-input placeholder="最大限额：0"></el-input>
					<p class="text-#86909C">CNY</p>
				</div>
			</div>
			<p class="text-28px text-#000000 font-bold mt-30px">付款方式</p>
			<p class="text-#86909C text-14px mt-10px">您最多可添加3种收款方式</p>
			<div class="mt-10px bg-#F5F5F5 w-255px h-50px flex items-center justify-center rounded-8px text-14px text-#000000 text-18px text-#000000"
				@click="showPaymentDialog = true">
				添加付款方式
			</div>
			<div class="mt-10px flex items-center">
				<div v-for="(item, index) in payment" :key="index"
					class="flex items-center justify-between mt-20px w-30%  border-1px border-dashed border-#E5E6EB rounded-10px box-border p-20px mr-5%">
					<div class="flex items-center">
						<p :style="{ backgroundColor: item.color }" class="w-4px h-14px"></p>
						<p class="ml-6px">{{ item.name }}</p>
					</div>
					<el-icon @click="deletePayMethod(item.name)">
						<CloseBold />
					</el-icon>
				</div>
			</div>
		</template>
		<template v-if="props.methods === 'sell'">
			<p class="text-14px text-#86909C">交易数量</p>
			<div
				class="mt-10px rounded-8px border-1px border-solid border-#E5E6EB flex items-center justify-between h-58px box-border p-20px">
				<el-input placeholder="请输入交易数量"></el-input>
				<p class="whitespace-nowrap text-#114CEE text-18px cursor-pointer mr-10px">全部</p>
				<p>USDT</p>
			</div>
			<p class="flex justify-end text-14px text-#000000 mt-10px">可用余额：660.00 USDT</p>
			<div class="flex items-center mt-20px">
				<p class="text-14px text-#86909C mr-10px"> 单笔订单限额</p>
				<img src="/transaction/c2c/c2cMore/fill-gantanhao.svg" alt="">
			</div>
			<div class="flex items-center justify-between mt-10px">
				<div class="rounded-8px border-1px border-solid border-#E5E6EB flex items-center justify-between h-58px box-border p-20px
					w-45%">
					<el-input placeholder="最小限额：20"></el-input>
					<p class="text-#86909C">CNY</p>
				</div>
				<img src="/transaction/c2c/c2cMore/hengxian.svg" alt="">
				<div class="rounded-8px border-1px border-solid border-#E5E6EB flex items-center justify-between h-58px box-border p-20px
					w-45%">
					<el-input placeholder="最大限额：0"></el-input>
					<p class="text-#86909C">CNY</p>
				</div>
			</div>
			<p class="text-28px text-#000000 font-bold mt-30px">收款方式</p>
			<p class="text-#86909C text-14px mt-10px">您最多可添加3种收款方式</p>
			<div class="mt-10px bg-#F5F5F5 w-255px h-50px flex items-center justify-center rounded-8px text-14px text-#000000 text-18px text-#000000"
				@click="showReceiveDialog = true">
				添加收款方式
			</div>
			<div class="mt-10px flex flex-col items-center">
				<div v-for="(item, index) in sellSelected" :key="index"
					class="flex items-center justify-between mt-20px w-100%  border-1px border-dashed border-#E5E6EB rounded-10px box-border p-20px mr-5%">
					<div>
						<div class="flex items-center">
							<p :style="{ backgroundColor: item.color }" class="w-4px h-14px"></p>
							<p class="ml-6px text-18px font-bold">{{ item.name }}</p>
						</div>
						<div class="ml-10px mt-10px">
							<div class="flex items-center text-16px">
								<p>持卡人姓名：</p>
								<p>{{ item.user }}</p>
							</div>
							<div class="flex items-center text-16px mt-10px">
								<p>银行账号：</p>
								<p>{{ item.account }}</p>
							</div>
						</div>
					</div>
					<el-icon @click="deleteSellSelected(index)" class="cursor-pointer">
						<CloseBold />
					</el-icon>
				</div>
			</div>
		</template>
		<div class="mt-60px flex justify-between">
			<el-button type="primary" color="#E5E6EB" style="width:47%;height:50px;font-size: 18px;" @click="backClick">
				上一步
			</el-button>
			<el-button type="primary" color="#114CEE" style="width:47%;height:50px;font-size: 18px;" @click="nextClick">
				下一步
			</el-button>
		</div>
	</div>
	<PaymentDialog :show="showPaymentDialog" :paymentList="paymentList" @close="closePaymentDialog" @add="addPayment" />
	<ReceiveDialog :show="showReceiveDialog" @close="closeReceiveDialog" @select="addReceive"/>
</template>
<script lang="ts" setup>
import PaymentDialog from './PaymentDialog.vue';
import ReceiveDialog from './ReceiveDialog.vue';
import { ElMessage } from 'element-plus'
interface IProps {
	methods: 'pay' | 'sell';
}

const props = defineProps<IProps>();

const emits = defineEmits(['next', 'back']);

// 控制支付方式弹窗
const showPaymentDialog = ref<boolean>(false);
const closePaymentDialog = (val: boolean) => {
	showPaymentDialog.value = val;
}

const addPayment = (val: any) => {
	showPaymentDialog.value = false;
	if (!val) {
		return;
	}
	for (let i = 0; i < payment.value.length; i++) {
		if (payment.value[i].name === val.name) {
			return;
		}
	}
	payment.value.push({ ...val });
}
// 控制选择出售方式弹窗
const showReceiveDialog = ref<boolean>(false);

const closeReceiveDialog = (val: boolean) => {
	showReceiveDialog.value = val
}

const addReceive = (val: any) => {
	showReceiveDialog.value = false;
	if (!val) {
		return;
	}
	if (sellSelected.value.length == 3) {
		ElMessage({
			message: '您最多可添加3种收款方式',
			type: 'warning',
		})
	}else{
		sellSelected.value.push({ ...val });
	}
}

const payment = ref<any[]>([
	{
		color: "#1187EE",
		name: "支付宝",
	},
	{
		color: "#07B175",
		name: "微信",
	},
	{
		color: "#F6AC57",
		name: "银行借记卡",
	}
]);


const paymentList = ref<any[]>([
	{
		color: "#1187EE",
		name: "支付宝"
	},
	{
		color: "#07B175",
		name: "微信"
	},
	{
		color: "#F6AC57",
		name: "银行借记卡"
	}
]);

const sellSelected = ref<any>([
	{
		color: "#1187EE",
		name: "支付宝",
		user: "***",
		account: "22272*****2122",
	},
	{
		color: "#07B175",
		name: "微信",
		user: "***",
		account: "1523*****2228",
	},
	{
		color: "#F6AC57",
		name: "银行借记卡",
		user: "***",
		account: "1523*****2228",
		bank: "招商银行 | 罗湖支行"
	}
])


const deleteSellSelected = (index: number) => {
	sellSelected.value.splice(index, 1);
}



const nextClick = () => {
	emits('next', true);
}

const backClick = () => {
	emits('back', false);
}

const deletePayMethod = (name: any) => {
	for (let i = 0; i < payment.value.length; i++) {
		if (payment.value[i].name === name) {
			payment.value.splice(i, 1);
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper,
::v-deep .el-input__inner {
	font-size: 18px;
	border: none !important;
	box-shadow: none !important;
}
</style>
